import Taro, { Component } from '@tarojs/taro'
import _isEmpty from 'lodash/isEmpty'
import PropTypes from 'prop-types'
import { View } from '@tarojs/components'

import './index.scss'

/**
 * 多行列表
 * 
 */
class MultiSelectList extends Component {

	static propTypes = {
		type: PropTypes.string,
		cls: PropTypes.string,
		fdata: PropTypes.oneOfType([
			PropTypes.array,
			PropTypes.object,
		]).isRequired,
		sdata: PropTypes.oneOfType([
			PropTypes.array,
			PropTypes.object,
		]),
		tdata: PropTypes.oneOfType([
			PropTypes.array,
			PropTypes.object,
		]),
		value: PropTypes.array,
		onSelect: PropTypes.func,
	}
	static defaultProps = {
		type: 'default',
		fdata: [],
		sdata: [],
		tdata: [],
		value: []
	}

	constructor(props){
		super(props)
		this.state = {
			item1: {},
			item2: {},
			item3: {},
		}
	}

	componentWillReceiveProps(nextProps){
		const { value } = nextProps
		this.setState({
			item1: !_isEmpty(value) ? value[0] : {},
			item2: !_isEmpty(value) ? value[1] : {},
			item3: !_isEmpty(value) ? value[2] : {}
		})
	}

	componentWillUnmount(){
		
		this.setState({ 
			item1: {},
			ietm2: {},
			item3: {}
		})
	}

	render(){
		const { cls, type, fdata, sdata, tdata } = this.props
		const { item1, item2, item3 } = this.state
		return (
			<View className={`search-down ${cls || ''}`} style={{top: top}}>
				<View className={'search-list'}>
					<View className='list-1'>
						{fdata.map(pl => {
							return (<View key={pl.id} className={`list-1-item list-item-${type} ${item1 && item1.name === pl.name ? 'item-1-active' : ''}`} onClick={this.selectFirstItem.bind(this, pl)}>{pl.name}</View>)
						})}
					</View>
					{!_isEmpty(sdata) ? <View className='list-1'>
						{sdata.map(cl => {
							return (<View key={cl.id} className={`list-1-item list-item-${type} ${item2 && item2.name === cl.name ? 'item-1-active' : ''}`} onClick={this.selectSecondItem.bind(this, cl)}>{cl.name}</View>)
						})}
					</View> :  <View className='list-1' />}
					{!_isEmpty(tdata) ? <View className='list-1'>
						{tdata.map(tl => {
							return (<View key={tl.id} className={`list-1-item list-item-${type} ${item3 &&item3.name === tl.name ? 'item-1-active' : ''}`} onClick={this.selectThirdItem.bind(this, tl)}>{tl.name}</View>)
						})}
					</View> : <View className='list-1'/>}
				</View>
			</View>
		)
	}

	selectFirstItem = (pl) => {
		this.setState({
			item1: pl,
		})
		const { onSelect } = this.props
		onSelect && onSelect([ pl ])
	}

	selectSecondItem = (cl) => {
		this.setState({
			item2: cl
		}, () => {
			const { onSelect } = this.props
			const { item1, item2 } = this.state
			onSelect && onSelect([item1, item2 ])
		})
		
	}

	selectThirdItem = (tl) => {
		this.setState({
			item3: tl
		}, () => {
			const { onSelect } = this.props
			const { item1, item2, item3 } = this.state
			onSelect && onSelect([item1, item2, item3])
		})
		
	}
}

export default MultiSelectList